<template>
  <div>
    <a
      class="feedback-text-btn"
      @click="
        () => {
          showModal = true
        }
      "
    >
      反馈建议
    </a>

    <!-- 反馈模态框 -->
    <a-modal
      v-model:open="showModal"
      title="反馈与建议"
      :width="600"
      :footer="null"
      @cancel="handleCancel"
      class="feedback-modal"
    >
      <a-form
        :model="formState"
        name="feedbackForm"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
        autocomplete="off"
        @finish="handleSubmit"
      >
        <!-- 反馈类型选择 -->
        <a-form-item
          label="反馈类型"
          name="type"
          :rules="[{ required: true, message: '请选择反馈类型' }]"
        >
          <a-select v-model:value="formState.type" placeholder="请选择反馈类型" allow-clear>
            <a-select-option value="bug">Bug 反馈</a-select-option>
            <a-select-option value="suggestion">功能建议</a-select-option>
            <a-select-option value="improvement">体验优化</a-select-option>
            <a-select-option value="other">其他问题</a-select-option>
          </a-select>
        </a-form-item>

        <!-- 主题输入 -->
        <a-form-item
          label="主题"
          name="title"
          :rules="[
            { required: true, message: '请输入反馈主题' },
            { min: 5, max: 100, message: '主题长度在5-100个字符之间' }
          ]"
        >
          <a-input v-model:value="formState.title" placeholder="请输入反馈主题" :maxlength="100" />
        </a-form-item>

        <!-- 详细描述 -->
        <a-form-item
          label="详细描述"
          name="content"
          :rules="[
            { required: true, message: '请输入详细描述' },
            { min: 10, message: '描述至少10个字符' }
          ]"
        >
          <a-textarea
            v-model:value="formState.content"
            placeholder="请详细描述您的问题或建议..."
            :rows="6"
            :maxlength="1000"
          />
        </a-form-item>

        <!-- 联系方式（可选） -->
        <a-form-item label="联系方式" name="contact">
          <a-input
            v-model:value="formState.contact"
            placeholder="邮箱或手机号（选填，方便我们联系您）"
          />
        </a-form-item>

        <!-- 提交按钮 -->
        <a-form-item :wrapper-col="{ span: 20, offset: 4 }">
          <a-button type="primary" html-type="submit" :loading="submitting" :disabled="submitting">
            {{ submitting ? '提交中...' : '提交反馈' }}
          </a-button>
          <a-button style="margin-left: 10px" @click="handleCancel" :disabled="submitting">
            取消
          </a-button>
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { message } from 'ant-design-vue'
import Http from '@/api/http'

// 模态框显示状态
const showModal = ref(false)

// 表单数据
const formState = reactive({
  type: undefined,
  title: '',
  content: '',
  contact: ''
})

// 提交状态
const submitting = ref(false)
const submitSuccess = ref(false)

// 取消操作
const handleCancel = () => {
  showModal.value = false
  // 重置表单
  formState.type = undefined
  formState.title = ''
  formState.content = ''
  formState.contact = ''
  submitSuccess.value = false
}

// 表单提交
const handleSubmit = async () => {
  submitting.value = true
  submitSuccess.value = false
  Http.post('/api/feedback/submit', { ...formState })
    .then(() => {
      submitSuccess.value = true
      message.success('反馈提交成功！')
      showModal.value = false
      handleCancel()
    })
    .catch((err) => {
      message.error(result.message || '提交失败，请稍后重试')
    })
    .finally(() => {
      submitting.value = false
    })
}
</script>

<style scoped>
/* 文字按钮样式 */
.feedback-text-btn {
  color: #ffffff;
}

.feedback-text-btn:hover {
  color: #ffffff;
}

/* 模态框样式 */
.feedback-modal :deep(.ant-modal-body) {
  padding: 24px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .feedback-button-container {
    top: 80px;
    right: 15px;
  }

  .feedback-modal :deep(.ant-modal) {
    width: 90% !important;
  }

  .feedback-modal :deep(.ant-form-item) {
    flex-direction: column;
  }

  .feedback-modal :deep(.ant-form-item-label) {
    padding: 0 0 8px 0;
  }
}
</style>
